<form action="{% url 'polls:vote' question.id %}" method="post" class="vote-form">
    {% csrf_token %}
    <div class="vote-card">
        <h1 class="vote-question">{{ question.question_text }}</h1>
        
        {% if error_message %}
        <div class="error-message" role="alert">
            <strong>{{ error_message }}</strong>
        </div>
        {% endif %}
        
        <div class="vote-options">
            {% for choice in question.choice_set.all %}
            <div class="vote-option">
                <input 
                    type="radio" 
                    name="choice" 
                    id="choice{{ forloop.counter }}" 
                    value="{{ choice.id }}"
                    class="vote-radio"
                    {% if forloop.first %}autofocus{% endif %}
                >
                <label for="choice{{ forloop.counter }}" class="vote-label">
                    {{ choice.choice_text }}
                </label>
            </div>
            {% endfor %}
        </div>
        
        <button type="submit" class="vote-button">Vote</button>
    </div>
</form>

<style>
    .vote-form {
        max-width: 600px;
        margin: 2rem auto;
        font-family: Arial, sans-serif;
    }
    
    .vote-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }
    
    .vote-question {
        color: #2c3e50;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
    
    .error-message {
        color: #e74c3c;
        background: #fdecea;
        padding: 0.75rem;
        border-radius: 4px;
        margin-bottom: 1rem;
    }
    
    .vote-options {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .vote-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .vote-radio {
        width: 1.25rem;
        height: 1.25rem;
        accent-color: #3498db;
    }
    
    .vote-label {
        font-size: 1.1rem;
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .vote-label:hover {
        color: #3498db;
    }
    
    .vote-button {
        background: #3498db;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .vote-button:hover {
        background: #2980b9;
    }
</style>